<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<!-- 引入样式
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
		-->
		<!-- 引入组件库
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
        -->

		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/modernizr-custom-v2.7.1.min.js"></script>
		<link rel="stylesheet" href="css/goodsMess.css" />
		<script src="js/checkauth.js"></script>
		<script>
			$(function() {
				var $miaobian = $('.Xcontent08>div');
				var $huantu = $('.Xcontent06>img');
				var $miaobian1 = $('.Xcontent26>div');
				$miaobian.mousemove(function() {
					miaobian(this);
				});
				$miaobian1.click(function() {
					miaobian1(this);
				});

				function miaobian(thisMb) {
					for(var i = 0; i < $miaobian.length; i++) {
						$miaobian[i].style.borderColor = '#dedede';
					}
					thisMb.style.borderColor = '#cd2426';

					$huantu[0].src = thisMb.children[0].src;
				}

				function miaobian1(thisMb1) {
					for(var i = 0; i < $miaobian1.length; i++) {
						$miaobian1[i].style.borderColor = '#dedede';
					}
					//		thisMb.style.borderColor = '#cd2426';
					$miaobian.css('border-color', '#dedede');
					thisMb1.style.borderColor = '#cd2426';
					$huantu[0].src = thisMb1.children[0].src;
				}

				/*
				$(".Xcontent33").click(function() {
					var value = parseInt($('.input').val()) + 1;
					$('.input').val(value);
				})

				$(".Xcontent32").click(function() {
					var num = $(".input").val()
					if(num > 0) {
						$(".input").val(num - 1);
					}

				})*/
				//回到顶部按钮
				$("#my-backtop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});

				//鼠标滚动事件，显式回到顶部按钮
			});
		</script>
	</head>

	<body>

		<!-- 引入头部 -->
		<div>
			<iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
		</div>
		<!--引入头部end-->

		<div class="my-index-body" style="background-color: #fff;">
			<!--横向导航栏-->
			<div class="my-daohang1">
				<div class="layui-container">
					<div class="layui-row">
						<!--菜单-->
						<div class="layui-col-md9" style="height: 50px;">
							<a href="">首页</a>
							<a href="">优抢购</a>
							<a href="">聚划算</a>
							<a href="">大转盘</a>
							<a href="">会员折扣</a>
							<a href="">买家秀</a>
						</div>
					</div>
				</div>
			</div>
			<!--横向导航end-->

			<!--促销活动部分-->
			<div class="my-cuxiaodiv">

			</div>
			<!--促销活动部分end-->

			<!-- 商品主题  -->
			<div class="Xcontent" style="height: 480px;margin: 20px auto;">
				<ul class="Xcontent01">

					<div class="Xcontent06"><img src="images/shangpinxiangqing/X1.png"></div>
					<ol class="Xcontent08" >
						<div class="Xcontent07"><img id="currentItemPicure" src="images/shangpinxiangqing/X1.png"></div>
						<div class="Xcontent09"><img src="images/shangpinxiangqing/X7.png"></div>
						<div class="Xcontent10"><img src="images/shangpinxiangqing/X8.png"></div>
						<div class="Xcontent11"><img src="images/shangpinxiangqing/X9.png"></div>
						<div class="Xcontent12"><img src="images/shangpinxiangqing/X10.png"></div>
					</ol>
					<ol class="Xcontent13">
						<div class="Xcontent14">
							<a href="#">
								<p id="currentItemName">新物品</p>
							</a>
						</div>
						<div class="Xcontent15"><img src="images/shangpinxiangqing/X11.png"></div>
						<div class="Xcontent16">
							<p>充电5分钟，温暖2小时</p>
						</div>
						<div class="Xcontent17">
							<p class="Xcontent18">售价</p>
							<p class="Xcontent19">￥<span id="currentItemPrice">69.00</span></p>
							<div class="Xcontent20">
								<p class="Xcontent21">促销</p>
								<img src="images/shangpinxiangqing/X12.png">
								<p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
							</div>
							<div class="Xcontent23">
								<p class="Xcontent24">服务</p>
								<p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp; 满88元免邮</p>
							</div>

						</div>
						<div class="Xcontent26">
							<p class="Xcontent27">颜色</p>
							<div class="Xcontent28"><img src="images/shangpinxiangqing/X14.png"></div>
							<div class="Xcontent29"><img src="images/shangpinxiangqing/X1.png"></div>
						</div>
						<div class="Xcontent30">
							<p class="Xcontent31">数量</p>
							<div class="Xcontent32" style="cursor:pointer;" id="subNumber"><img src="images/shangpinxiangqing/X15.png"></div>
							<form>
								<input class="input" id="buyNumber" value="1"></form>
							<div class="Xcontent33" style="cursor:pointer;" id="addNumber"><img src="images/shangpinxiangqing/16.png"></div>

						</div>
						<div class="Xcontent34">
							<a href="javascript:void(0);" onclick="buyNow()"  class="layui-btn layui-btn-normal">立即购买</a>
						</div>
						<div class="Xcontent35">
							<a href="" class="layui-btn layui-btn-danger" style="color: #fff;">
								加入购物车
							</a>
						</div>
					</ol>
				</ul>
			</div>
			<!-- 商品主题end -->

			<!-- 产品详情 -->
			<div class="layui-container" style="top:20px;">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend>产品详情</legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md3" style="border: 1px solid #E5E5E5;">
						<p>在线客服：</p>
					</div>
					<div class="layui-col-md9" style="padding-left: 50px;font-size: 16px;" >
						产品详情<br />
						<img src="img/xq01.jpg" />
						<img src="img/xq02.jpg" />
						<img src="img/xq03.jpg" />
					</div>
				</div>
			</div>
			<!-- 产品详情end -->

			<!--引入底部-->
			<div class="my-footer">
				<iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
			</div>
			<!--引入底部end-->

			<!--回到顶部按钮-->
			<div id="my-backtop">
				<span class="layui-icon layui-icon-up"></span>
			</div>

		</div>

	</body>
	<script>

		let currentItemId = getQueryVariable("id");
		console.log("当前商品编号是："+currentItemId);

		let currentItem = {};

		//获取url参数
		function getQueryVariable(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
			var context = "";
			if (r != null)
				context = r[2];
			reg = null;
			r = null;
			return context == null || context == "" || context == "undefined" ? "" : context;
		}

		layui.use(['element', 'carousel', 'laypage'], function() {
			var element = layui.element;
			var carousel = layui.carousel;
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem: 'test1',
				count: 100,
				theme: '#FF5722'
			});

			//建造实例
			carousel.render({
				elem: '#test1',
				width: '100%' //设置容器宽度
					,
				arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});
		});

		$.ajax({
			url: "https://localhost:8443/xiaomimall/items/details?id="+currentItemId,
			type: "GET",
			dataType: "text",
			success: function (resp) {
				let result = JSON.parse(resp);
				if(result.code===200) {
					currentItem = result.data;
					$("#currentItemName").text(currentItem.name);
					$("#currentItemPrice").text(currentItem.price);
					$("#currentItemPicure").prop("src",currentItem.pic);
				}
			}
		});


		$("#addNumber").click(function(){
			let num = $("#buyNumber").val();
			if(num<100){
				num++;
				$("#buyNumber").val(num);
			}
			//console.log('增加数量');
		})

		$("#subNumber").click(function(){
			let num = $("#buyNumber").val();
			if(num>1){
				num--;
				$("#buyNumber").val(num);
			}
			//console.log('减少数量');
		})


		function buyNow(){
            let buyNumber = $("#buyNumber").val();
			//判断当前用户是否已经登录
			if(!isLogin()) {
				window.location.href='login.html';
			}
			//console.log('执行立即购买...');
		    //构造一个购物车对象，保存到本地缓存里面，页面跳转到buy.html
            let cart = {
				goodsList:[],
				totalPrice: 0
			}
            currentItem.buyNum = buyNumber;
			cart.goodsList.push(currentItem);
			cart.totalPrice = currentItem.price * buyNumber;

			console.log("******你的购物车对象是********");
			console.log(cart);
			window.localStorage.setItem("cart.xiaomimall.com_users"+currentLoginUserId, JSON.stringify(cart));
			//两秒钟之后跳转buy.html
			setTimeout("javascript:window.location.href='buy.html'",2000);

		}

	</script>

</html>